<template>
  <div class="global-header">
    <router-link to="/">
      <div class="title-bar">
        <!-- 请替换为实际logo路径 -->
        <img src="@/assets/logo.svg" class="logo" alt="logo">
        <div class="title">
          智能云图库VisionX
        </div>
      </div>
    </router-link>
    <a-menu
        v-model:selectedKeys="current"
        mode="horizontal"
        :items="items"
        class="nav-menu"
        @click="doMenuClick"
    />
    <div class="auth-section">
      <div v-if="useLoginUserStore().loginUser.value">
        <a-dropdown>
          <a-space>
            <a-avatar :src="loginUser.userAvatar"></a-avatar>
            {{loginUser.userName ?? '访客'}}
          </a-space>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="doLogout">
                <LogoutOutlined />
                退出登录
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>

      </div>
      <div v-else>
        <a-button class="login-btn" type="primary" href="/user/login">登 录</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref} from 'vue';
import {LogoutOutlined} from '@ant-design/icons-vue'
import {MenuProps, message} from 'ant-design-vue';
import {useRouter} from "vue-router";
import {useLoginUserStore} from "@/stores/UseLoginUserStore";
import {userLogoutUsingPost} from "@/api/userController";

const loginUser = useLoginUserStore()
const originItems = [
  {
    key: '/home',
    label: '主页',
    title: '主页',
  },
  {
    key: '/user/admin',
    label: '用户管理',
    title: '用户管理'
  },
  {
    key: '/add_picture',
    label: '创建图片',
    title: '创建图片'
  },
  {
    key: '/picture/admin',
    label: '图片管理',
    title: '图片管理'
  },
  {
    key: '/add_picture/batch',
    label: '抓取图片',
    title: '抓取图片'
  },
  {
    key: '/space/admin',
    label: '空间管理',
    title: '空间管理',
  },
  {
    key: '/add_space',
    label: '创建空间',
    title: '创建空间',
  },
  {
    key: '/my_space',
    label: '我的空间',
    title: '我的空间'
  }
]
const current = ref<string[]>([]);
const router = useRouter()
const doMenuClick = ({ key }: any) => {
  router.push({
    path: key
  })
}
router.afterEach((to, from, failure) => {
  current.value = [to.path]
})

/**
 * 用户注销
 */
const doLogout = async () => {
  const res = await userLogoutUsingPost()
  if (res.data.code === 0){
    loginUser.setLoginUser({userName: '未登录', userRole: ''})
    message.success('退出登录成功')
    await router.push({
      path: '/user/login'
    })
  }else {
    message.error('退出登录失败' + res.data.message)
  }
}
// 过滤菜单项
const filterItems = (menus = [] as MenuProps['items']) => {
  return menus?.filter((menu) => {
    if (menu?.key?.startsWith('/admin')){
      const loginUser = useLoginUserStore().loginUser
      if (!loginUser || loginUser.userRole !== "admin"){
        return false
      }
    }
    return true
  })
}
// 展示再菜单的路由数组
const items = computed(() =>
  filterItems(originItems)
)
</script>

<style lang="less" scoped>
.global-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
  background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  z-index: 1000;

  .title-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateX(5px);

      .title {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
      }
    }

    .logo {
      height: 36px;
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
    }

    .title {
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      background: linear-gradient(45deg, #fff 30%, #89c4f4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 1.5px;
      transition: all 0.3s ease;
    }
  }

  .nav-menu {
    flex: 1;
    background: transparent;
    border-bottom: none;
    margin: 0 40px;

    :deep(.ant-menu-item) {
      color: rgba(255, 255, 255, 0.85);
      font-size: 16px;
      padding: 0 20px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &::after {
        border-bottom: 2px solid #40a9ff;
        bottom: -2px;
      }

      &:hover {
        color: #fff !important;
        transform: translateY(-2px);

        &::before {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 50%;
          width: 60%;
          height: 3px;
          background: linear-gradient(90deg, transparent, #40a9ff, transparent);
          transform: translateX(-50%);
        }
      }

      &.ant-menu-item-selected {
        color: #fff !important;
        font-weight: 500;
      }
    }
  }

  .auth-section {
    display: flex;
    gap: 16px;

    .login-btn {
      height: 40px;
      padding: 0 28px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
      font-weight: 500;
      letter-spacing: 1px;
      box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(24, 144, 255, 0.5);
      }
    }
  }
}

@media (max-width: 768px) {
  .global-header {
    padding: 0 20px;

    .title-bar .title {
      font-size: 20px;
    }

    .nav-menu {
      margin: 0 20px;

      :deep(.ant-menu-item) {
        padding: 0 12px;
        font-size: 14px;
      }
    }

    .login-btn {
      padding: 0 20px;
    }
  }
}
</style>
